<template>
  <div class="suc-reservation">
      <div class="top">
          <p>航班号{{this.flightInfo}}预约出发时间{{this.carStartTime|datafmt('YYYY年MM月DD日 HH:MM:SS')}}</p>
      </div>
      <div class="buttom">
          <div class="imgbox">
            <div class="left">
                <img src="../../../static/img/sijitu.png" alt="">
            </div>
            <div class="right">
                <h3>预约成功</h3>
                <p>您的出发时间为{{this.carStartTime|datafmt('YYYY年MM月DD日 HH:MM:SS')}},在您<span>出发前30分钟</span>准时为您发送司机消息</p>
            </div>
          </div>
          <button @click="cancelOrder">取消订单</button>
      </div>
  </div>
</template>
<script>
import axios from 'axios'
import {cancelOrder} from 'api/api'
import {mapGetters, mapMutations} from 'vuex'
export default {
  computed: {
    ...mapGetters([
      'flightInfo', // 航班信息
      'carStartTime' // 选择的时间
    ])
  },
  methods: {
    // 点击取消订单的时候触发
    cancelOrder () {
      let order = localStorage.getItem('orderNum')
      axios.post(cancelOrder, {
        'param': {
          'fields': {
            'orderNum': order,
            'nullRates': '1.2'
          }
        }
      }).then((res) => {
        console.log(res)
      })
      let msg = ''
      this.setFlightInfo(msg)
      this.setTimeInfo(msg)
      this.setSearchBoxInfo(msg)
      this.setDestination(msg)
      this.setShowNoCall(false)
      this.setShowCancel(false)
      this.setShowSuccess(false)
      this.setShowType(true)
      this.setShowInType(false)
    },
    ...mapMutations({
      setShowNoCall: 'SET_SHOWNOCALL',
      setShowCancel: 'SET_SHOWCANCEL',
      setShowType: 'SET_SHOWTYPE',
      setFlightInfo: 'SET_FLIGHTINFO',
      setTimeInfo: 'SET_TIMEINFO',
      setSearchBoxInfo: 'SET_SEARCHBOXINFO',
      setDestination: 'SET_DESTINATION',
      setShowInType: 'SET_SHOWINTYPE',
      setShowSuccess: 'SET_SHOWSUCCESS'
    })
  }
}
</script>
<style lang="css" scoped>
.suc-reservation{
    width: 100%;
    background-color: #fff;
}
.suc-reservation .top{
    width: 90%;
    height: 50px;
    line-height: 50px;
    display: inline-block;
    text-align: center;
    color:rgb(51,51,51);
    position: fixed;
    font-size: 16px;
    /* margin-top: 55px; */
    z-index: 999;
    box-shadow: 0 0 10px rgb(153,153,153);
}
.suc-reservation .buttom{
    width:90%;
    /* height: 160px; */
    margin: 0px auto;
    position: fixed;
    bottom: 20px;
    margin-left: 5%;
    box-shadow: 0 0 10px rgb(153,153,153);
    background-color: #fff;
}
.suc-reservation .buttom .imgbox{
    height: 110px;
    width: 100%;
    border-bottom: 1px solid #ccc;
}
.suc-reservation .buttom .imgbox .left{
    width: 70px;
    height: 70px;
    float: left;
    margin-left: 10px;
}
.suc-reservation .buttom .imgbox .left img{
    width: 100%;
    height: 100%;
}
.suc-reservation .buttom .imgbox .right{
   width: 100%;
   padding-left: 100px;
   box-sizing: border-box;
   margin-top: 20px;
}
.suc-reservation .buttom .imgbox .right h3{
    text-align: left;
    font-weight: 700;
    font-size: 18px;
    line-height: 25px;
}
.suc-reservation .buttom .imgbox .right p{
    text-align: left;
    font-size: 14px;
    line-height: 20px;
    color: rgb(153,153,153);
}
.suc-reservation .buttom .imgbox .right p span{
    color: rgb(51,51,51);
}
.suc-reservation .buttom button{
    width: 100%;
    height: 40px;
    border: 0;
    outline: none;
    background-color: #fff;
    font-size: 16px;
    padding: 0;
}
</style>